<template>
  <div class="discover">
    <div class="card-container">
      <Card 
        v-for="card in discoverCards" 
        :key="card.id" 
        :cardData="card" 
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import Card from '../components/Card.vue'

const discoverCards = [
  {
    id: 1,
    image: 'https://codelover.club/coursefiles/images/film/生活.jpeg ',
    category: '生活',
    duration: '03\'09"',
    title: '单身女孩约会必看「最棒的爱情攻略」'
  },
  {
    image: 'https://codelover.club/coursefiles/images/film/混剪.jpeg',
    category: '混剪',
    duration: '03\'14"',
    title: '电影慢镜头混剪「看见镜头的美」'
  },
  {
    id: 3,
    image: 'https://codelover.club/coursefiles/images/film/创意.jpeg',
    category: '创意',
    duration: '04\'31"',
    title: '必学！「数码照片变成胶片的方法」'
  }
]
</script>

<style scoped>
.discover {
  display: flex;
  justify-content: center;
  padding-bottom: 10px;
  width: calc(100% - 20px);
  margin: 0 auto;
  background-color: #faf6f6;
}

.card-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
  border: 1px solid #ddd;
  padding: 20px;
  background-color: #fff;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  max-width: 600px;
  margin: 0 auto; /* 添加此行 */
}
</style>